<#assign path = springMacroRequestContext.contextPath>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>登录 - 千寻 - Thousands Find</title>
    <link rel="stylesheet" type="text/css" href="${path}/static/assets/css/register-login.css">
    <link rel="stylesheet" href="${path}/static/layui/css/layui.css">
    <link rel="stylesheet" href="${path}/static/layui/css/global.css">

    <script src="${path}/static/assets/js/jquery-1.8.2.min.js"></script>
    <script src="${path}/static/layui/layui.js"></script>
    <script src="${path}/static/layui/lay/dest/layui.all.js"></script>
    <style>
        .registe{
            display: none;
        }
    </style>
</head>

<body>
<div id="box"></div>
<div class="cent-box">
    <div class="cent-box-header">
        <h1 class="main-title hide">千寻</h1>
        <h2 class="sub-title">生活热爱分享 - Thousands Find</h2>
    </div>

    <div class="cont-main clearfix">
        <div class="index-tab">
            <div class="index-slide-nav">
                <a href="javascript:void (0);" class="active">登录</a>
                <a href="javascript:void (0);" class="register">注册</a>
                <div class="slide-bar"></div>
            </div>
        </div>
        <div class="login">
            <div class="login form">
                <div class="group">
                    <div class="group-ipt l_mobile">
                        <input value="15140230115" style="color:gray;" onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" type="text" name="l_mobile" id="l_mobile" class="ipt" placeholder="手机号码" required>
                    </div>
                    <div class="group-ipt l_password">
                        <input value="19930608" type="password" name="l_password" id="l_password" class="ipt" placeholder="输入您的登录密码" required>
                    </div>
                </div>
            </div>
            <div class="button">
                <button type="submit" class="login-btn register-btn" id="login">登录</button>
            </div>
            <div class="remember clearfix">
                <label class="remember-me"><span class="icon"><span class="zt"></span></span><input type="checkbox" name="remember-me" id="remember-me" class="remember-mecheck" checked>记住我</label>
                <label class="forgot-password">
                    <a href="javascript:void(0);">忘记密码？</a>
                </label>
            </div>
        </div>

        <div class="registe">
            <div class="login1 form">
                <div class="group">
                    <div class="group-ipt r_mobile">
                        <input onkeyup="this.value=this.value.replace(/\D/g,'')" onafterpaste="this.value=this.value.replace(/\D/g,'')" type="text" name="r_mobile" id="r_mobile" class="ipt" placeholder="手机号码" required>
                    </div>
                    <div class="group-ipt r_username">
                        <input type="text" name="r_username" id="r_username" class="ipt" placeholder="输入一个用户名" required>
                    </div>
                    <div class="group-ipt r_password">
                        <input type="password" name="r_password" id="r_password" class="ipt" placeholder="设置登录密码" required>
                    </div>
                </div>
            </div>
            <div class="button">
                <button type="submit" class="login-btn register-btn" id="register">注册</button>
            </div>
        </div>
    </div>
</div>

<script src='${path}/static/assets/js/particles.js' type="text/javascript"></script>
<script src='${path}/static/assets/js/background.js' type="text/javascript"></script>
<script src='${path}/static/assets/js/jquery.min.js' type="text/javascript"></script>
<script>
    layui.use(['layer'], function() {

    });

    <#if errorMsg??>
        layer.alert('${errorMsg}');
    </#if>

    /*登录*/
    $("#login").click(function () {
        submitLogin();
    });

    function submitLogin() {
        var mobile = document.getElementById("l_mobile").value;
        var password = document.getElementById("l_password").value;
        var postForm = document.createElement("form");//表单对象
        postForm.method="post" ;
        postForm.action = '${path}/login.do' ;
        var emailInput = document.createElement("input") ; //email input
        emailInput.setAttribute("name", "mobile") ;
        emailInput.setAttribute("value", mobile);
        postForm.appendChild(emailInput) ;
        var pwdInput = document.createElement("input");// password input
        pwdInput.setAttribute("name","password");
        pwdInput.setAttribute("value",password);
        postForm.appendChild(pwdInput);
        document.body.appendChild(postForm) ;
        postForm.submit() ;
        document.body.removeChild(postForm) ;
    }

    $(document).keypress(function(e) {
        // 回车键事件
        if(e.which == 13) {
            var userName = document.getElementById("r_username").value;
            if(userName==null || userName==''){
                submitLogin();
            }else{
                submitRegister();
            }
        }
    });

    /*注册*/
    $("#register").click(function () {
        submitRegister();
    });

    function submitRegister() {
        var userName = document.getElementById("r_username").value;
        var password = document.getElementById("r_password").value;
        var mobile = document.getElementById("r_mobile").value;
        if(mobile==null || mobile==''){
            layer.alert("手机号不能为空!");
            return false;
        }
        if(userName==null || userName==''){
            layer.alert("用户名不能为空!");
            return false;
        }
        if(password==null || password==''){
            layer.alert("密码不能为空!");
            return false;
        }
        $.ajax({
            url : '${path}/register.do',
            data:{
                userName : userName,
                password : password,
                mobile : mobile
            },
            type : "post",
            success : function(data) {
                if(data.msg=='0'){
                    layer.alert("注册成功,请登录!",function () {
                        window.location.href = '${path}/toLogin.do';
                    });
                }else if(data.msg=='1'){
                    layer.alert("用户已存在!");
                }else{
                    layer.alert("发生错误了!");
                }
            },
            error : function() {
                layer.alert("ajax失败！");
            }
        });
    }

    /*记住我*/
    $("#remember-me").click(function(){
        var n = document.getElementById("remember-me").checked;
        if(n){
            $(".zt").show();
        }else{
            $(".zt").hide();
        }
    });
    /*切换开始*/
    $(".active").click(function(){
        $("#r_mobile").val("");
        $("#r_username").val("");
        $("#r_username").val("");
        $(".login").show();
        $(".registe").hide();
        $(".slide-bar").css("left","0");
    });

    $(".register").click(function(){
        $("#l_mobile").val("");
        $("#l_password").val("");
        $(".login").hide();
        $(".registe").css("display","block");
        $(this).addClass("active");
        $(".active").removeClass("active");
        $(".slide-bar").css("left","4em");

    });
    /*切换结束*/
</script>
</body>
</html>